<template>
  <div>这是我的页 - actions</div>
  <p>count: {{ count }}</p>
  <button @click="fn">异步count++</button>

  <p>name: {{ name }}</p>

  <ul>
    <li v-for="item in list" :key="item.id">{{ item.nm }}</li>
  </ul>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
  data() {
    return {
      name: "zhangsan",
    };
  },
  // computed: mapState(["count", "list"]),
  computed: mapState({
    count: (state) => state.a.count,
    list: (state) => state.b.list,
  }),
  methods: {
    ...mapActions(["asyncAddCount", "asyncGetData"]),
    fn() {
      // actions的函数，在组件里面用dispatch去调用
      // mutations的函数，在组件里面用commit去调用
      // this.$store.dispatch("asyncAddCount", 100);
      this.asyncAddCount(100);
    },
  },
  mounted() {
    // this.$store.dispatch("asyncGetData");
    this.asyncGetData().then(() => {
      this.name = "lisi";
    });
  },
};
</script>
